<!--
 * @Author: xiangrun
 * @Date: 2020-07-15 13:55:04
 * @LastEditTime: 2020-07-15 14:35:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shkg-web-detentionHouse-webSite\src\components\publicComponent\NewButton.vue
-->
<template>
  <span
    class="new-button"
    :class="{'is-disabled': disabled}"
    @click="handleClick"
  >
    <svg-icon v-if="svgIcon" :icon-class="svgIcon" />
    <i v-else-if="icon" :class="icon" />
    <slot>按钮</slot>
  </span>
</template>

<script>
export default {
  props: {
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // svg图标class名称，传入时将在按钮前部渲染出svg图标
    svgIcon: {
      type: String,
      default: ''
    },
    // 普通图标class名称，传入时将在按钮前部渲染出普通图标
    // svgIcon具有更高的优先级，svgIcon内容不为空时，该属性无效
    icon: {
      type: String,
      default: ''
    }
  },

  methods: {
    handleClick() {
      if (!this.disabled) {
        this.$emit('click')
      }
    }
  }
}
</script>

<style lang="scss">
.new-button {
  cursor: pointer;
  color: #333;
  font-size: 16px;
  line-height: 32px;
  svg {
    pointer-events: none;
    font-size: 24px;
  }
}
.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.new-button + .new-button {
  margin-left: 30px;
}
</style>
